<!--多条件搜索-->
<form nz-form [formGroup]="formModel" (ngSubmit)="submitForm()">
  <div class="toolbar margin-bottom" [ngClass]="isMobile?'wrap-mobile':'wrap'">

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">运营商</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择运营商">
          <nz-select formControlName="userId" nzShowSearch nzAllowClear nzPlaceHolder="请选择运营商"
                     (ngModelChange)="gainUserId($event)">
            <nz-option *ngFor="let item of userList" nzLabel="{{item?.username}}   {{item?.name}}" nzValue="{{item.id}}"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">场地</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择场地">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择场地" formControlName="merchantStoreId">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of merchantStoreList" [nzLabel]="item.storeName" [nzValue]="item.id"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>



    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">支付公司</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择支付公司">
          <!--          <input type="text" nz-input formControlName="deviceNo" placeholder="请选择设备"/>-->
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择支付公司" formControlName="code">
            <nz-option nzLabel="不限" nzValue="0"></nz-option>
            <nz-option *ngFor="let item of payCompanyList" [nzLabel]="item.name" [nzValue]="item.code"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">结算情况</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择结算情况">
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择结算情况" formControlName="payStatus">
            <nz-option nzLabel="全部" [nzValue]="-1"></nz-option>
            <nz-option nzLabel="未打款" [nzValue]="0"></nz-option>
            <nz-option nzLabel="打款成功" [nzValue]="1"></nz-option>
            <nz-option nzLabel="打款失败" [nzValue]="2"></nz-option>
            <nz-option nzLabel="取消打款" [nzValue]="3"></nz-option>
          </nz-select>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8" nzFor="name">商户号</nz-form-label>
        <nz-form-control [nzSpan]="16" nzErrorTip="请选择商户号">
          <input type="text" nz-input formControlName="merchantId" placeholder="请选择商户号"/>
        </nz-form-control>
      </nz-form-item>
    </div>


    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">开始时间</nz-form-label>
        <nz-form-control >
          <app-my-date-picker [dateTimeType]="startDateTimeType" [date]="startDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <nz-form-item>
        <nz-form-label [nzSpan]="8">结束时间</nz-form-label>
        <nz-form-control [nzSpan]="16">
          <app-my-date-picker [dateTimeType]="endDateTimeType" [date]="endDateTime" (event)="outDateTime($event)"></app-my-date-picker>
        </nz-form-control>
      </nz-form-item>
    </div>

    <div class="item" nz-col nzXs="24" nzSm="24" nzMd="12" nzLg="8" nzXl="6">
      <div nz-col nzFlex="auto" class="search-area">
        <button nz-button nzType="primary" class="button_search"><i nz-icon nzType="search" nzTheme="outline"></i>查询</button>
      </div>
    </div>

  </div>
</form>

<div [ngClass]="isMobile?'wrap-mobile':'wrap'">
  <nz-table #nzTable  [nzData]="listOfData" nzTableLayout="fixed"
            [(nzPageIndex)]="pageHelper.currentPage" [nzFrontPagination]="false"
            (nzPageIndexChange)="nzPageIndexChange($event)"
            [(nzPageSize)]="pageHelper.pageSize" [nzTotal]="pageHelper.totalItems"
            [nzScroll]="{ x: 'auto' }" >
    <thead>
    <tr>
      <th>时间</th>
      <th>场地</th>
      <th>运营商</th>
      <th>合作伙伴</th>
      <th>设备</th>
      <th>数量</th>
      <th>余币</th>
      <th>类型</th>
      <th>状态</th>
      <th>会员</th>
      <!--    <th>操作</th>-->
    </tr>
    </thead>
    <tbody>
    <ng-container *ngFor="let data of nzTable.data">
      <tr>
        <td nzEllipsis>{{ data.createTime | date: 'yyyy-MM-dd HH:mm:ss'}}</td>
        <td nzEllipsis>{{ data.storeName }}</td>
        <td nzEllipsis>
          <div>{{data.username}}</div>
          <div class="text-sm text-grey">{{data.name}}</div>
        </td>
        <td nzEllipsis>
          <div>{{ data.agencyName }}</div>
          <div class="text-sm text-grey">{{ data.agencyNo}}</div>
        </td>
        <td nzEllipsis>{{ data.deviceNo }}</td>
        <td nzEllipsis>{{ data.consume }}</td>
        <td nzEllipsis>{{data.rechargeAfterBalance+data.donateAfterBalance }}</td>
        <td nzEllipsis>
          <span *ngIf="data.coinType == 1">线下投币</span>
          <span *ngIf="data.coinType == 2">线上投币</span>
        </td>
        <td nzEllipsis>
          <span *ngIf="data.disposeStatus==1">投币退还</span>
          <span *ngIf="data.disposeStatus==2">投币成功</span>
          <span *ngIf="data.disposeStatus==3 && data.externalDeviceStatus==0">透传失败</span>
          <span *ngIf="data.disposeStatus==3 && data.externalDeviceStatus==3">设备投币失败</span>
          <span *ngIf="data.disposeStatus==3 && data.status==0">投币异常</span>
          <span *ngIf="data.disposeStatus==3 && data.status==3">投币失败</span>
          <span *ngIf="data.status==1 && data.externalDeviceStatus==2">正在投币</span>
          <span *ngIf="data.status==2">正在投币</span>
        </td>
        <td nzEllipsis>
          <label *ngIf="data.nickName != null">{{ data.nickName}}</label>
          <label *ngIf="data.nickName == null">{{ data.zfbUserId}}</label>
        </td>
        <!--      <td nzEllipsis>-->
        <!--        <a>详情</a>-->
        <!--        <nz-divider nzType="vertical"></nz-divider>-->
        <!--        <a>禁用</a>-->
        <!--      </td>-->
      </tr>
<!--      <tr nzEllipsis [nzExpand]="expandSet.has(data.id)">-->
<!--        <span>{{ data.description }}</span>-->
<!--      </tr>-->
    </ng-container>
    </tbody>
  </nz-table>
</div>
